import { ComponentType } from 'react'
import Taro, { PureComponent, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import { observer, inject } from '@tarojs/mobx'
import Scan from '../../assets/icons/saoma.svg'
import IndexPage from '../../assets/icons/yemian-copy-copy.svg'
import Me from '../../assets/icons/Icon_wodeB.svg'

import './index.scss'

type PageStateProps = {
  indexStore: {
    scanUrl: string,
    scanCode: Function
  }
  listStore: {
    toolRows: Array<any>,
    getToolDataList: Function,
    clear: Function,
  }
}

interface Index {
  props: PageStateProps;
}


@inject('indexStore', 'listStore')
@observer
class Index extends PureComponent {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '工具列表'
  }

  componentWillMount() {
    this.props.listStore.getToolDataList()
  }

  componentWillUnmount() {
    this.props.listStore.clear()
  }


  onTrClick(id) {
    this.props.indexStore.scanUrl = `https://project.weitip.com/index/tool/info/id/${id}`
    Taro.navigateTo({ url: '/pages/tool-detail/index' })
  }

  render() {
    const { indexStore, listStore } = this.props
    const { toolRows } = listStore
    const flag = toolRows.length > 0
    return (
      <View className='wrapper'>
        <View className='table-wrap'>
          <View className='table-head'>
            <View className='table-th'>工具名称</View>
            <View className='table-th'>生产单位</View>
            <View className='table-th'>责任人</View>
            <View className='table-th'>有效期</View>
          </View>
          <View className='table-body'>
            {
              flag ? toolRows.map(item => {
                const { id, name, production_unit, charge, validity_end } = item
                return (
                  <View className='table-tr' key={id} onClick={this.onTrClick.bind(this, id)}>
                    <View className='table-td'>{decodeURIComponent(name)}</View>
                    <View className='table-td'>{decodeURIComponent(production_unit)}</View>
                    <View className='table-td'>{decodeURIComponent(charge)}</View>
                    <View className='table-td'>{validity_end || '-'}</View>
                  </View>
                )
              }) : (
                  <View className='empty-data'>
                  <Text>还没有数据</Text>
                </View>
              )
            }
          </View>
        </View>
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', image: IndexPage },
            { title: '扫码', image: Scan },
            { title: '我的', image: Me }
          ]}
          onClick={(value) => {
            if (value === 0) {
              try {
                Taro.navigateBack()
              } catch (e) {
                Taro.redirectTo({ url: 'pages/index/index' })
              }
            }
            if (value === 1) {
              indexStore.scanCode()
              return
            }
          }}
          current={-1}
        />
      </View>
    )
  }
}

export default Index  as ComponentType
